<%--
  Created by IntelliJ IDEA.
  User: feng
  Date: 2023/5/12
  Time: 11:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>体育馆管理系统</title>
  <meta name="description" content="体育馆管理系统">
  <meta name="keywords" content="体育馆管理系统">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/plugins/elementui/index.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/style.css">
  <!-- 引入组件库 -->
  <script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery.min.js"></script>
  <script src="<%=request.getContextPath()%>/resources/js/vue.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins/elementui/index.js"></script>
  <script src="<%=request.getContextPath()%>/resources/js/axios-0.18.0.js"></script>
  <style>
    .datatable {
      position: relative;
      box-sizing: border-box;
      -webkit-box-flex: 1;
      width: 100%;
      max-width: 100%;
      font-size: 14px;
      color: rgb(96, 98, 102);
      overflow: hidden;
      flex: 1 1 0%;
    }
    .datatable td, .datatable th {
      padding: 12px 0;
      min-width: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      text-overflow: ellipsis;
      vertical-align: middle;
      position: relative;
      text-align: left;
    }
  </style>
</head>
<body class="hold-transition">
<div id="app">
  <div class="content-header">
    <h1>密码修改<small>密码修改</small></h1>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>密码修改</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="app-container">
    <div class="box">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="密码修改" name="first">
          <el-form label-position="right" label-width="100px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="初始密码">
                  <el-input  v-model="oldPass" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="请出入新密码">
                  <el-input v-model="newPass" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="确认新密码">
                  <el-input v-model="newPassTure" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleUpdateTure()">确认修改</el-button>
      </div>
    </div>
  </div>
</div>
<script>
</script>
</body>

<script>
  var vue = new Vue({
    el: '#app',
    data:{
      activeName:'first',//添加/编辑窗口Tab标签名称
      oldPass:"",//旧密码
      newPass:"",//新密码
      newPassTure:"",//新密码确认
      formData: {},//表单数据
    },
    created() {
      this.findPage();
    },
    methods: {
      //分页查询
      findPage() {
        this.formData.userNo = JSON.parse(JSON.stringify("${userMess.userNo}"));
        this.formData.realName = "${userMess.realName}";
        this.formData.userName = "${userMess.userName}";
        this.formData.userPassword = "${userMess.userPassword}";
        this.formData.userRole = "${userMess.userRole}";
        this.formData.telephone = "${userMess.telephone}";
        this.formData.permissionID = "${userMess.permissionID}";
        this.formData.recordRemark = "${userMess.recordRemark}";
        this.formData.userBalance = "${userMess.userBalance}";
        localStorage.setItem('obj', JSON.stringify(this.formData));
        this.formData = JSON.parse(localStorage.getItem('obj'));
      },
      // 重置表单
      resetForm() {
        this.formData = {};
      },

      handleUpdateTure() {
        var param = {
          userNo:this.formData.userNo//查询条件
        };
        axios.post("<%=request.getContextPath()%>/record/find.do",param).then((res)=>{
          if(res.data.data.rows.length === 1){
            //弹出编辑窗口
            this.dialogFormVisible4Edit = true;
            //为模型数据赋值，通过VUE数据双向绑定进行信息的回显
            this.formData={};
            this.formData = res.data.data.rows[0];
            if(this.oldPass !== this.formData.userPassword){
              alert("原始密码不正确");
            }else if(this.newPass !== this.newPassTure){
              alert("两次密码输入不一致");
            }else{
              this.formData.userPassword = this.newPass;
              axios.post("<%=request.getContextPath()%>/record/change.do",this.formData).then((response)=> {
                //隐藏编辑窗口
                this.dialogFormVisible4Edit = false;
                if(response.data.success){
                  this.oldPass = "";
                  this.newPass = "";
                  this.newPassTure = "";
                  this.$message({
                    message: response.data.data,
                    type: 'success'
                  });
                }else{
                  this.$message.error(response.data.data);
                }
              })
            }
          }else{
            this.$message.error("获取数据失败，请刷新当前页面");
          }
        });

      },
    }
  })
</script>
</html>
